import { reqGetClassByPage } from "@/api/reqClass";
import type { pageForm } from "@/types/base";
import type { ClassForm } from "@/types/class";
import { onMounted, ref, watch, watchEffect } from "vue";

export const useShowClass = () => {
  // 翻页获取数据
  const classList = ref<ClassForm[]>([]);
  // 定义一个搜索表单
  const searchMapRef = ref({
    teacher_id: "",
    manager_id: "",
  });

  const reset = () => {
    searchMapRef.value = {
      teacher_id: "",
      manager_id: "",
    };
    changeRef.value = !changeRef.value;
    nowPageRef.value = 1;
    sizeRef.value = 5;
  };

  const nowPageRef = ref(1);
  const sizeRef = ref(5);
  const totalRef = ref(0);
  const changeRef = ref(true);
  //   通过请求获取数据
  const getClassByPage = async () => {
    const form = {
      page: nowPageRef.value,
      size: sizeRef.value,
    };

    const {
      data: { total, data },
    } = await reqGetClassByPage({
      ...form,
      searchMap: searchMapRef.value,
    });
    totalRef.value = total;
    classList.value = data;
  };
  watch([changeRef, nowPageRef, sizeRef], () => {
    getClassByPage();
  });
  onMounted(() => {
    getClassByPage();
  });

  //   依赖收集（能看到使用的依赖收集 错的）
  //   对应函数内部，使用的响应式数据
  //   watchEffect(() => {
  //     getClassByPage()
  //   })

  return {
    classList,
    nowPageRef,
    sizeRef,
    totalRef,
    changeRef,
    searchMapRef,
    reset,
    getClassByPage
  };
};
